<template>
  <div class="client-box">
    <el-radio-group v-model="tabTadio">
      <el-radio-button label="我的客户" />
      <el-radio-button label="客户池" />
    </el-radio-group>
    <div style="margin-top:20px;">
      <div>
        <el-button type="primary" @click="goAppoint">新建预约</el-button>
        <el-button v-if="!showUnfold" @click="showUnfold=true">展开筛选</el-button>
        <el-button v-if="showUnfold" type="info" @click="showUnfold=false">收起筛选</el-button>
      </div>
      <el-collapse-transition>
        <div v-if="showUnfold">
          <div class="search-box">
            <div class="search-list">
              <span class="search-label">学员姓名</span>
              <el-input v-model="searchList.studentName" placeholder="请输入学员姓名" class="search-item" />
            </div>
            <div class="search-list">
              <span class="search-label">联系方式</span>
              <el-input v-model="searchList.contact" placeholder="请输入联系方式" class="search-item" />
            </div>
            <div class="search-list">
              <span class="search-label">跟进状态</span>
              <el-select v-model="searchList.followStatus" placeholder="请选择" class="search-item">
                <el-option
                  v-for="item in followStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <el-button type="primary">搜索</el-button>
          </div>
          <div class="search-box">
            <div class="search-list">
              <span class="search-label">来源渠道</span>
              <el-select v-model="searchList.source" placeholder="请选择" class="search-item">
                <el-option
                  v-for="item in sourceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="search-list">
              <span class="search-label">意向度</span>
              <el-select v-model="searchList.intention" placeholder="请选择" class="search-item">
                <el-option
                  v-for="item in intentionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="search-box">
            <div class="search-list">
              <span class="search-label">录入时间</span>
              <el-date-picker
                v-model="searchList.startTime"
                :picker-options="pickerOptions0"
                type="date"
                placeholder="选择开始日期"
              />
              <span style="margin:0 10px;">至</span>
              <el-date-picker
                v-model="searchList.endTime"
                :picker-options="pickerOptions1"
                type="date"
                placeholder="选择结束日期"
              />
            </div>
          </div>
        </div>
      </el-collapse-transition>
    </div>
    <div v-if="tabTadio=='我的客户'">
      <el-tabs v-model="myClient" type="card" style="margin-top:30px;" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all" />
        <el-tab-pane label="待跟进" name="stayFollow" />
        <el-tab-pane label="跟进中" name="following" />
        <el-tab-pane label="已邀约" name="yetInvite" />
        <el-tab-pane label="已试听" name="yetAuditions" />
        <el-tab-pane label="已成交" name="yetDeal" />
        <el-tab-pane label="无效" name="invalid" />
      </el-tabs>
      <el-table v-loading="loading" :data="myClientForm" border>
        <el-table-column label="学员姓名" prop="name" align="center" />
        <el-table-column label="联系方式" prop="contact" align="center" />
        <el-table-column label="意向度" prop="intention" align="center" />
        <el-table-column label="意向课程" prop="intentCourse" align="center" />
        <el-table-column label="来源渠道" prop="source" align="center" />
        <el-table-column label="录入时间" prop="inputTime" align="center" />
        <el-table-column label="跟进状态" prop="followStatus" align="center" />
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button type="text" @click="goApply(scope.row.id)">报名</el-button>
            <el-button type="text" @click="goAudition(scope.row.id)">办理试听</el-button>
            <el-button type="text" @click="goClientInfo">查看详情</el-button>
            <el-button type="text" @click="goAppoint">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="tabTadio=='客户池'">
      <el-tabs
        v-model="clientPool"
        type="card"
        style="margin-top:30px;"
        @tab-click="clientPoolClick"
      >
        <el-tab-pane label="全部" name="all" />
        <el-tab-pane label="未分配" name="unallocation" />
      </el-tabs>
      <el-table v-loading="loading" :data="clientPoolForm" border>
        <el-table-column label="学员姓名" prop="name" align="center" />
        <el-table-column label="联系方式" prop="contact" align="center" />
        <el-table-column label="意向度" prop="intention" align="center" />
        <el-table-column label="意向课程" prop="intentCourse" align="center" />
        <el-table-column label="来源渠道" prop="source" align="center" />
        <el-table-column label="录入时间" prop="inputTime" align="center" />
        <el-table-column label="跟进人" prop="followPerson" align="center" />
        <el-table-column label="跟进状态" prop="followStatus" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button :disabled="!scope.row.followPerson==''" type="text" @click="getClient">领取</el-button>
            <el-button :disabled="scope.row.followPerson==''" type="text" @click="recycleClient">回收</el-button>
            <el-button type="text" @click="goClientInfo">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新建预约弹框 -->
    <!-- <el-dialog :visible.sync="newAppointDialog" title="提示" width="700px">
      <el-form
        ref="newAppointForm"
        :model="newAppointForm"
        :rules="newAppointRules"
        label-width="120px"
      >
        <el-form-item label="学员" prop="name">
          <el-autocomplete
            v-model="newAppointForm.name"
            :fetch-suggestions="handleSearchName"
            placeholder="请输入内容"
            class="newAppoint-item"
          />
        </el-form-item>
        <el-form-item label="预约类型">
          <el-radio v-model="newAppointForm.appointType" label="experience">体验课</el-radio>
          <el-radio v-model="newAppointForm.appointType" label="official">正式课</el-radio>
        </el-form-item>
        <el-form-item
          v-if="newAppointForm.appointType=='official'"
          label="购买的面授课程"
          prop="buyFaceCourse"
        >
          <el-autocomplete
            v-model="newAppointForm.buyFaceCourse"
            :fetch-suggestions="handleBuyFaceCourse"
            placeholder="请输入内容"
            class="newAppoint-item"
          />
        </el-form-item>
        <el-form-item label="上课课程" prop="classCourse">
          <el-autocomplete
            v-model="newAppointForm.classCourse"
            :fetch-suggestions="handleClassCourse"
            placeholder="请输入内容"
            class="newAppoint-item"
          />
        </el-form-item>
        <el-form-item label="上课年月" prop="month">
          <el-date-picker
            v-model="newAppointForm.month"
            type="month"
            placeholder="选择月"
            class="newAppoint-item"
          />
        </el-form-item>
        <el-form-item label="可选日期" prop="date">
          <el-select
            v-model="newAppointForm.date"
            filterable
            placeholder="请选择"
            class="newAppoint-item"
          >
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上课地点">
          <el-select
            v-model="newAppointForm.classSite"
            filterable
            placeholder="请选择"
            class="newAppoint-item"
          >
            <el-option
              v-for="item in classSiteOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input :rows="4" v-model="newAppointForm.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newAppointCancel">取 消</el-button>
        <el-button type="primary" @click="newAppointConfirm">确 定</el-button>
      </span>
    </el-dialog>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabTadio: '我的客户',
      myClient: 'all',
      clientPool: 'all',
      loading: false,
      showUnfold: false,
      searchList: {
        studentName: '',
        contact: '',
        followStatus: '',
        source: '',
        intention: '',
        startTime: '',
        endTime: ''
      },
      followStatusOptions: [
        {
          value: '全部',
          label: '全部'
        },
        {
          value: '待跟进',
          label: '待跟进'
        },
        {
          value: '跟进中',
          label: '跟进中'
        },
        {
          value: '已邀约',
          label: '已邀约'
        },
        {
          value: '已试听',
          label: '已试听'
        },
        {
          value: '已成交',
          label: '已成交'
        },
        {
          value: '无效',
          label: '无效'
        }
      ],
      sourceOptions: [
        {
          value: '在线购买',
          label: '在线购买'
        },
        {
          value: '在线招生',
          label: '在线招生'
        },
        {
          value: '来电咨询',
          label: '来电咨询'
        },
        {
          value: '地推',
          label: '地推'
        },
        {
          value: '外呼电话',
          label: '外呼电话'
        },
        {
          value: '转介绍',
          label: '转介绍'
        },
        {
          value: '客户直访',
          label: '客户直访'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      intentionOptions: [
        {
          value: '高',
          label: '高'
        },
        {
          value: '中',
          label: '中'
        },
        {
          value: '低',
          label: '低'
        }
      ],
      myClientForm: [
        {
          id: '1',
          name: '刘德华',
          contact: '12315315132',
          inputTime: '2019-06-03',
          intention: '中',
          intentCourse: '语文作文',
          source: '在线购买',
          followStatus: '跟进中'
        }
      ],
      clientPoolForm: [
        {
          name: '刘德华',
          contact: '12315315132',
          inputTime: '2019-06-03',
          intention: '中',
          intentCourse: '语文作文',
          source: '在线购买',
          followStatus: '跟进中',
          followPerson: '15232151564'
        }
      ],
      // 开始时间限制
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.searchList.endTime) {
            return time.getTime() < Date.now() - 8.64e7 || time.getTime() > this.searchList.endTime
          } else {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      },
      // 结束时间限制
      pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7 || time.getTime() < this.searchList.startTime
        }
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    clientPoolClick(tab, event) {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    goAppoint() {
      this.$router.push({ name: 'Newappoint' })
    },
    goClientInfo() {
      this.$router.push({ name: 'Clientinfo' })
    },
    // 报名
    goApply(id) {
      this.$emit('studentApply', id)
    },
    // 办理试听
    goAudition(id) {
      this.$router.push({ name: 'Appointment', query: { studentId: id } })
    },
    // 领取
    getClient(id) {
      // 添加跟进人
      this.clientPoolForm[0].followPerson = '13512153154'
    },
    // 回收
    recycleClient(id) {
      this.$confirm('是否确认回收当前客户？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除跟进人
        this.clientPoolForm[0].followPerson = ''
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.client-box {
  .search-box {
    margin: 20px 0;
    display: flex;
    .search-list {
      margin-right: 20px;
      color: #353535;
      .search-label {
        display: inline-block;
        width: 100px;
        text-align: right;
        margin-right: 10px;
        font-size: 14px;
      }
      .search-item {
        width: 280px;
      }
    }
  }
}
</style>
